<template>
  <view>
    <LeftNav
      :nav-list="categoryList"
      :nav-whith="156"
      :show-key="'displayContent'"
      :display-multiple-items="displayMultipleItems"
      :swiper-height="swiperHeight"
      @leftNavFn="leftNavFn"
    />
    <view
      v-if="isEmpty"
      class="right-content"
      :style="'width:calc(100% - 200rpx);height:'+(swiperHeight - safeBottom - 50)+'px;float:left;'"
    >
      <image class="image" :src="vuex_imgPath+'/empty2x.png'" />
      <view class="text">矮油，这里空空如也~</view>
    </view>
    <scroll-view
      v-else
      class="right-content"
      :scroll-y="true"
      :scroll-with-animation="true"
      :enable-back-to-top="true"
      :style="'width:calc(100% - 200rpx);height:'+(swiperHeight - safeBottom - 50)+'px;float:left;'"
    >
      <template
          v-for="(item, index) in afterCategoryList.secondList"
      >
        <view
            v-if="item.secondList.length > 0"
            :key="index"
            class="class-wrap"
        >
          <view class="custom-title">{{ item.afterCategoryName }}</view>
          <view class="class-content clearfix">
            <view
                v-for="(childItem,childIndex) in item.secondList"
                :key="childIndex"
                @click="linkProductListFn(childItem)"
            >
              <view class="class-item uni-ellipsis-1">{{ childItem.afterCategoryName }}</view>
            </view>
          </view>
        </view>
      </template>
    </scroll-view>
  </view>
</template>

<script>
import LeftNav from '@/components/left-nav'
import { setPlatformFn } from '@/common/ycCommon'
import {
  listFirstDisplay,
  linkedShowCategory
} from '@/api/yc_goods';

export default {
  components: {
    LeftNav,
  },
  props: {
    swiperHeight: {
      type: Number,
      default: 0
    },
    displayMultipleItems: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      title: 'Index',
      customEls: ['search'],
      navOffsetTop: 0,
      tabsHeight: 0,
      isEmpty: false,
      categoryList: [],
      afterCategoryList: {},
      current: 0,
      activeStyle: { width: '190rpx', textAlign: 'center' },
      inactiveStyle: { width: '190rpx', textAlign: 'center' },
      tabList: [
        {
          name: '分类',
          code: 1,
        },
        {
          name: '品牌',
          code: 2,
        },
        {
          name: '场景',
          code: 3,
        },
      ],
      safeBottom: 0,
    }
  },
  mounted() {
    this.pageInitFn()
  },
  methods: {
    /*安全距离设置*/
    setSafeBottomFn() {
      // #ifdef MP-WEIXIN
      if (this.vuex_systemInfo && this.vuex_systemInfo.length > 0 && this.vuex_systemInfo[1].safeAreaInsets) {
        this.safeBottom = this.vuex_systemInfo[1].safeAreaInsets.bottom / 2
      }
      // #endif
      // #ifdef MP-ALIPAY
      if (this.vuex_systemInfo && this.vuex_systemInfo.length > 0 && this.vuex_systemInfo[1].safeAreaInsets) {
        const bottom = this.vuex_systemInfo[1].safeAreaInsets.bottom > 50 ? this.vuex_systemInfo[1].safeArea.bottom : this.vuex_systemInfo[1].safeAreaInsets.bottom
        this.safeBottom = bottom / 2
      }
      // #endif
    },
    leftNavFn(val) {
      if (val.relationFirstLevelObject.length == 0) {
        this.isEmpty = true
        return
      } else {
        this.isEmpty = false
      }
      this.linkedShowCategoryFn(val.relationFirstLevelObject[0].frontCategoryId)
    },
    pageInitFn() {
      this.setSafeBottomFn()
      this.listFirstDisplayFn()
    },
    listFirstDisplayFn() {
      const platform = setPlatformFn(this.vuex_memberInfo) || 20
      /*if (this.vuex_memberInfo && this.vuex_memberInfo.length > 0) {
        switch (Number(this.vuex_memberInfo.accountType)) {
          case 10:
            platform = 10
            break
          case 20:
            platform = 20
            break
          case 30:
            platform = 20
            break
          case 39:
            platform = 30
            break
          case 40:
            platform = 30
            break
          default:
            platform = 20
            break
        }
      }*/
      const params = {
        'platform': platform,
        'afterCategoryIds': [1],
        'categoryLevel': 1,
        'source': '20',
        'warehouse': 1
      }
      listFirstDisplay(params).then((res) => {
        this.$emit('setPageParamsFn', null)
        if (res.errorCode != 0) {
          this.$u.toast(res.errorMessage)
          return
        }
        this.$nextTick(() => {
          if (res.data) {
            this.categoryList = res.data
            this.linkedShowCategoryFn(res.data[0].relationFirstLevelObject[0].frontCategoryId)
            this.$forceUpdate()
          }
        })
      }).catch((err) => {
        this.$emit('setPageParamsFn', 'ERROR', err.message ? err.message : '服务异常')
        this.$emit('resetLoadMoreFn', {
          isLoadMore: true,
          loadStatus: 'nomore'
        })
      })
    },
    linkedShowCategoryFn(afterCategoryIds) {
      const platform = setPlatformFn(this.vuex_memberInfo) || 20
      /*if (this.vuex_memberInfo && this.vuex_memberInfo.length > 0) {
        switch (Number(this.vuex_memberInfo.accountType)) {
          case 10:
            platform = 10
            break
          case 20:
            platform = 20
            break
          case 30:
            platform = 20
            break
          case 39:
            platform = 30
            break
          case 40:
            platform = 30
            break
          default:
            platform = 20
            break
        }
      }*/
      const params = {
        'platform': platform,
        'categoryLevel': '1',
        'source': 20,
        'afterCategoryIds': [
          afterCategoryIds
        ],
        'warehouse': 1,
      }
      linkedShowCategory(params).then((res) => {
        this.$emit('setPageParamsFn', null)
        if (res.errorCode != 0) {
          this.$u.toast(res.errorMessage)
          return
        }
        this.$nextTick(() => {
          if (res.data) {
            console.log(res);
            this.afterCategoryList = res.data[0]
            this.$forceUpdate()
          }
        })
      }).catch((err) => {
        this.$emit('setPageParamsFn', 'ERROR', err.message ? err.message : '服务异常')
        this.$emit('resetLoadMoreFn', {
          isLoadMore: true,
          loadStatus: 'nomore'
        })
      })
    },
    linkProductListFn(category) {
      console.log(category);
      uni.navigateTo({
        url: `/productList/productList/index?title=${category.afterCategoryName}&categoryId=${category.afterCategoryId}&categoryLevel=${category.categoryLevel}&pageType=category`
      });
    },
  },
}
</script>

<style lang="scss" scoped>

.right-content{
  background: #F5F5F5;
  padding-left:32rpx;
  .class-content{
    min-height: 40rpx;
    .class-item{
      width: 138rpx;
      height: 72rpx;
      line-height: 72rpx;
      background:$uni-bg-color;
      border-radius: 8rpx;
      text-align: center;
      font-size:$uni-font-size-base;
      padding: 0 14rpx;
      float: left;
      margin:8rpx 16rpx 32rpx 0;
    }
  }
  .image{
    width: 336rpx;
    height: 448rpx;
    margin-top: 40%;
    margin-left: 114rpx;
    margin-bottom: 10rpx;
  }
  .text{
    font-size: 24rpx;
    margin-top: 20rpx;
    color: #666666;
    text-align: center;
    font-weight: 400;
  }
}

</style>
